<template>
  <div class="sideBar">
    <div class="top">
      <div class="logo">
        <router-link :to="'/index'">
          <siteLogo class="img" mainColor="var(--bs-dark-color)" themeColor="var(--bs-theme-color)" :size="42" />
        </router-link>
      </div>
      <div class="navList">
        <router-link :to="item.url" class="item" v-for="(item, index) in navList" :key="index">
          <dl>
            <dt>
              <i class="iconfont" :class="item.icon"></i>
            </dt>
            <dd>{{ item.name }}</dd>
          </dl>
        </router-link>
        <a>
          <dl @click="handlelogOut">
            <dt><i class="iconfont icon-logout"></i></dt>
            <dd>登出</dd>
          </dl>
        </a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch } from "vue";
import { useRouterStore, useIndexStore } from "@/store/path";
import { themeLight, themeDark } from "@/api/theme";
import "vue-color-kit/dist/vue-color-kit.css";
import { useRoute } from "vue-router";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
import siteLogo from "./siteLogo.vue";
import router from "@/route/index";
const route = useRoute();
const data = reactive({});
const navList = reactive([
  { name: "首页", icon: "icon-home", url: "/admin/index" },
  { name: "档期管理", icon: "icon-date", url: "/admin/calendar" },
  { //这个是员工的
    id: "dashboard",
    name: "工作台",
    icon: "icon-dashboard",
    url: "/workspace",
  },
  {//这个是员工的
    id: "finance",
    name: "财务管理",
    icon: "icon-money",
    url: "/workspace/finance",
  },
  {//这个是员工的
    id: "orders",
    name: "订单状态",
    icon: "icon-order",
    url: "/workspace/orders",
  },
  {//这个是员工的
    id: "messages",
    name: "消息中心",
    icon: "icon-message",
    url: "/workspace/messages",
  },

  { name: "职位分类管理", icon: "icon-date", url: "/admin/category" },
  { name: "职位管理", icon: "icon-user", url: "/admin/position/list" },
  { name: "素材管理", icon: "icon-instagram", url: "/admin/material/list" },
  { name: "订单管理", icon: "icon-order", url: "/admin/order/list" },
  { name: "营业额统计", icon: "icon-money", url: "/admin/money" },

  { name: "任务日历", icon: "icon-calendar", url: "/workspace/calendar" },
  { name: "员工任务明细", icon: "icon-calendar", url: "/workspace/task" },
  { name: "员工管理", icon: "icon-user", url: "/admin/staff" },
  { name: "系统设置", icon: "icon-setting", url: "/admin/settings", requireAdmin: true },
  // { name: "数据字典", icon: "icon-dict", url: "/admin/dict" }
]);
const routerStore = useRouterStore();
const indexStore = useIndexStore();
const props = defineProps({
  showActive: {
    type: Boolean,
    default() {
      return false;
    },
  },
});
data.currentIndex = 0;
data.theme = "light";
data.themeColor = "#1A83A6";
data.activeThemePanel = false;
const toggleTheme = () => {
  let theme = data.theme == "light" ? "dark" : "light";
  setTheme(theme);
};
const setTheme = (theme) => {
  data.theme = theme;
  localStorage.setItem("themeType", theme);
  let themeSource = theme == "light" ? themeLight : themeDark;
  let root = document.querySelector(":root");
  for (let i in themeSource) {
    root.style.setProperty(i, themeSource[i]);
  }
};

const toggleThemePanel = () => {
  data.activeThemePanel = data.activeThemePanel ? false : true;
};
const hideThemePanel = () => {
  data.moreColorVisiable = false;
  data.activeThemePanel = false;
};

const setThemeColor = (theme) => {
  data.themeColor = theme;
  indexStore.$patch({
    themeColor: theme,
  });
  hideThemePanel();
  let root = document.querySelector(":root");
  root.style.setProperty("--bs-theme-color", theme);
  localStorage.setItem("themeColor", theme);
};

const toggleMoreColor = () => {
  data.moreColorVisiable = data.moreColorVisiable ? false : true;
};
const changeColor = (color) => {
  data.pickerColor = color.hex;
  // setThemeColor(color.hex)
};
const toLoginPage = () => {
  vToast({
    message: "对不起您无权限查看此页",
  }).then((res) => {
    indexStore.$patch({ token: null });
    localStorage.removeItem("token");
    localStorage.removeItem("userInfo");
    // window.location.href = "/#/user/login";
  });
};
const handlelogOut = () => {
  vConfirm({
    message: "确定退出吗?",
  })
    .then(() => {
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      setTimeout(() => {
        vToast({
          message: "退出成功！",
        });
        setTimeout(() => {
          // window.location.href = "/#/user/login";
        }, 500);
      }, 500);
    })
    .catch(() => { });
};
let userInfoLoaded = false;
onMounted(() => {
  let token = localStorage.getItem("token");
  if (!token) {
    window.location.href = "/#/user/login";
  }
  const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
  if (!['superadmin', 'admin'].includes(userInfo.permission)) {
    // 创建新数组而不是直接赋值
    const filteredList = navList.filter(item => !item.requireAdmin);
    navList.splice(0, navList.length, ...filteredList);
  }
  // let themeType = localStorage.getItem("themeType");
  // let themeColor = localStorage.getItem("themeColor");
  // let themeSource = indexStore.themeColors;
  // if (themeType) {
  //   setTheme(themeType);
  // }
  // if (!themeColor) {
  //   themeColor = themeSource[Math.floor(Math.random() * themeSource.length)];
  // }
  // setThemeColor(themeColor);
  if (userInfoLoaded) return;
  // userInfo().then((res) => {
  //   if (res.code == 200) {
  //     if (res.data.isadmin != 1) {
  //       toLoginPage();
  //     }
  //   } else {
  //     toLoginPage();
  //   }
  // });
});
</script>
<style lang="less" scoped>
@import url("@/assets/css/variables.less");

.sideBar {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;

  .top {
    .logo {
      height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      a {
        display: flex;
        font-weight: bold;
        justify-content: center;
        color: var(--bs-dark-color);
        align-items: center;

        p {
          &>i {
            font-size: 28px;
            padding-right: 6px;
          }

          span {
            i {
              font-style: normal;
              color: var(--bs-theme-color);
            }
          }

          .img {
            width: 48px;
            height: 48px;
          }
        }

        &:hover {
          color: var(--bs-theme-color);
        }
      }
    }
  }

  .toggle {
    transition: border-color 0.6s;
    cursor: pointer;
    position: relative;
    display: none;

    &>ul {
      display: flex;
      justify-content: space-between;
      border-top: var(--bs-light-color) 1px solid;

      &>li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 36px;
        height: 36px;
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        padding: 10px 0;
        position: relative;
        border-left: var(--bs-light-color) 1px solid;

        .iconfont {
          font-size: 22px;
          position: absolute;
          left: 50%;
          margin-left: -11px;
          color: var(--bs-dark-color);

          &.icon-palette-line {
            color: var(--bs-theme-color);
          }
        }

        &:first-child {
          border-left: none;
        }
      }
    }
  }
}

.navList {
  display: flex;
  text-align: center;
  flex-direction: column;

  a {
    cursor: pointer;
    transition: all 0.3s;
    color: var(--bs-link-color);
    padding: 6px;

    &:hover {
      color: var(--bs-theme-color);
    }

    dl {
      height: 38px;
      font-size: 14px;
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 0 14px;

      .iconfont {
        font-size: 16px;
      }
    }

    &.active {
      dl {
        background: #fff;
        border-radius: 6px;
        color: var(--bs-theme-color);
        font-weight: bold;
      }
    }
  }
}
</style>
  